<template>
  <div>
    <van-checkbox-group v-model="result" ref="box">
      <van-swipe-cell
        v-for="(item, index) in $store.state.shopcar"
        :key="index"
      >
        <van-row>
          <van-col span="4">
            <van-checkbox :name="item" @click="check"></van-checkbox
          ></van-col>
          <van-col span="20">
            <van-card :price="item.price" :title="item.title" :thumb="item.img">
              <template #footer>
                <van-stepper v-model="item.num" @click="changenum" />
              </template>
            </van-card>
          </van-col>
        </van-row>
        <template #right>
          <van-button
            square
            text="删除"
            type="danger"
            class="delete-button"
            @click="remove(item.iid)"
          />
        </template>
      </van-swipe-cell>
    </van-checkbox-group>
    <van-submit-bar :price="sum*100" button-text="提交订单">
      <van-checkbox v-model="checked" @click="checkall">全选</van-checkbox>
    </van-submit-bar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      result: [],
      checked: false,
    };
  },
  mounted() {},
  methods: {
    changenum() {
      this.$store.commit("changenum");
    },
    remove(id) {
      this.result.forEach((i, index) => {
        if (i.iid == id) {
          this.result.splice(index, 1);
        }
      });
      this.$store.commit("remove", id);
      this.check();
      
     
    },
    check() {
      if (this.result.length == this.$store.state.shopcar.length&&this.result.length!=0) {
        this.checked = true;
      } else {
        this.checked = false;
      }
    },
    checkall() {
      if (this.checked == true) {
        this.$refs.box.toggleAll(true);
      } else {
        this.$refs.box.toggleAll(false);
      }
    },
  },
  computed:{
      sum(){
          let price=0
          this.result.forEach((i) => {
              price+=i.price*i.num
          });
          return price
      }
  }
};
</script>

<style lang="scss"></style>
